Footer - Imagen y color

Los estilos del Footer en una plantilla de Blogger se muestran más o menos así:

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Si nos fijamos el ancho es el mismo que en outer-wrapper

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Comprobaremos que footer y outer-wrapper tienen la misma anchura (width) de no ser así adaptamos el footer a la misma medida de outer-wrapper. Una vez hacemos esa modificación vamos a añadir la opción de nuevos gadgets en el footer.

Nos situamos en plantilla Edición de HTMLy buscamos al final donde dice:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Esa parte la sustituimos por lo siguiente:

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'>
</b:section>
</div>

Con esa opción podemos añadir contenido cómodamente. Si en nuestra plantilla ya lo tenemos omitimos este paso y pasamos al siguiente que es añadir color a esa zona, eso nos dará una idea del espacio que está ocupando.
Buscamos los estilos que vienen a continuación y añadimos lo señalado en negrita.

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background-color: #6D993A;
height:120px;
}

A ese espacio ya podemos añadirle contenido desde plantilla de diseño, si preferimos que en lugar de color nos muestre una imagen lo que haremos será sustituir donde dice background-color: #6D993A; por background-image:url('url-de-nuestra-imagen');
Si la imagen fuera muy alta lo solucionamos añadiendo height:120px; aumentando o disminuyendo altura según nuestra imagen.

Con este cambio el footer ya tiene otro aspecto y podemos añadir contenido.

Si queremos añadir gadgets lo ideal sería hacerlo en un footer con columnas por aquello de la distribución. Aún así podemos probar a añadir por ejemplo información del autor, los créditos de la plantilla o una pequeña información. Queda a gusto de cada uno...

Para un ejemplo de información y créditos añadiremos los estilos justo antes de ]]></b:skin>

.autor{
float: left;
line-height: 2em;
color:#fff;
padding-left: 20px;
padding-top: 75px;
font-family:Arial, Verdana, Sans-Serif;
font-weight: normal;
font-size:11px
}
.creditos {
float: right;
color: #fff;
line-height: 1.4em;
padding-top: 75px;
padding-right: 20px;
font-family:Arial, Verdana, Sans-Serif;
text-transform:uppercase;
font-weight: normal;
font-size:11px;
text-transform: none;
}

Guardamos los cambios y nos vamos a plantilla de diseño, en un gadget de HTML/JavaScript añadimos:

<div class="autor">
<p> <a href="url-del-blog" title="Texto al pasar el cursor">Gem@ BLOG (aquí tu nombre)</a> 2009 (año) </p>
</div>
<div class="creditos">
<p><a href="url-página-autor">texto enlace</a></p>
</div>